<!--各分类商品购物车存量Top10-->
<template>

  <el-row :gutter="24" class="el-row">
    <el-col :span="24" class="el-card">
      请选择：
      <el-select v-model="category1" placeholder="请选择" class="dialog-input" @change="getCategory2">
        <el-option v-for="(item,index) in category1Options" :key="item.index" :label="item.name" :value="item.value"/>
      </el-select>
      <el-select v-model="category2" placeholder="请选择" class="dialog-input" @change="getCategory3">
        <el-option v-for="(item,index) in category2Options" :key="item.index" :label="item.name" :value="item.value"/>
      </el-select>
      <el-select v-model="category3" placeholder="请选择" class="dialog-input" @change="getTmTopNData">
        <el-option v-for="(item,index) in category3Options" :key="item.index" :label="item.name" :value="item.value"/>
      </el-select>
      <div id="tmChart" style="width:100%;height:340px;"/>
    </el-col>
  </el-row>

</template>


<script>
import * as echarts from 'echarts'
import api from '@/api/statistics/goods/goods'

export default {


  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.init()

  },

  data() {
    return {
      showNum: 7,
      xData: [],
      yData: [],
      max: 1000,
      min: 1,
      category1: "",
      category2: "",
      category3: "",
      selectItem: [],//部门
      category1Options: [],//一级分类
      category2Options: [],//二级分类
      category3Options: []//三级分类
    }
  },
  methods: {
    //一级分类
    getCategory1() {
      console.log("this.$parent.curDate" + this.$parent.curDate)
      api.getCategory1(this.$parent.curDate).then(response => {
        console.log("----------------" + response)
        this.category1Options = response.data;
      })
    },
    //二级分类
    getCategory2() {
      console.log(this.category1)
      api.getCategory2(this.$parent.curDate, this.category1).then(response => {
        this.category2Options = response.data;
      })
    },
    //三级级分类
    getCategory3() {
      this.countyItem = [];
      api.getCategory3(this.$parent.curDate, this.category1, this.category2).then(response => {
        this.category3Options = response.data;
      })
    },
    getTmTopNData() {
      api.getTmTopNData(this.$parent.curDate, this.category1, this.category2, this.category3).then(response => {
        this.xData = response.data.xData
        this.yData = response.data.yData
        this.initData(this.xData)
        this.setChartData()

      }).catch(response => {
        console.log('失败' + response)
        // Vue.$message.error('服务器错误，请稍后再试')
        //reject(response)
      })
    },
    initData(xData) {
      if (xData && xData.length > 0) {
        this.min = xData[0]
        this.max = xData[xData.length - 1]
      }
    },
    // 加载banner列表数据
    init() {
      this.getCategory1()
      this.setChartData()

    },

    setChartData() {
      const option = {
        title: {
          text: '分类商品购物车存量Top',
          subtext: this.$parent.dateRange
        },
        yAxis: {
          type: 'category',
          data: this.yData
        },
        xAxis: {
          type: 'value'
        },
        series: [{
          data: this.xData,
          type: 'bar'
        }],
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: this.min,
          max: this.max,
          text: [this.max, this.min],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#94AAD6', '#103667']
          }
        }

      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('tmChart'))
      myChart.clear()
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

